<!--
 * @Descripttion:
 * @version:
 * @Author: ZhangXue
 * @Date: 2021-07-12 09:17:30
 * @LastEditors: ZhangXue
 * @LastEditTime: 2021-07-13 14:26:58
-->
<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script>
export default {
  name: "App",
  data () {
    return {
      // 当前选中的tab
      activeTab: "",
      // 用户选中的系统菜单
      activeUserTab: "",
      // 是否是登录页
      isLogin: false,
      // 是否是首页
      isIndex: false,
      // 是否是404
      isNotFound: false,
      // 用户名
      username: ""
    };
  },
  watch: {
    $route: {
      // 监听路由
      handler (val, oldVal) {
        this.isLogin = val.name === "login";
        this.isIndex = val.name === "index";
        this.isNotFound = val.name === "NotFound";
        // 如果是从login过来的，重新刷新用户名
        if (oldVal.name === "login") {
          this.username = window.sessionStorage.getItem("username");
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  created () {
    this.isLogin = this.$route.name === "login";
    this.isIndex = this.$route.name === "index";
    this.isNotFound = this.$route.name === "NotFound";
  },
  mounted () {
    // 设置菜单展示的username;
    this.username = window.sessionStorage.getItem("username");
  },
  methods: {
    /**
      * 菜单点击事件
      *
      * @param {string} val 当前点击的菜单信息
      * **/
    tabClick (val) {
      if (val !== "logout") {
        // 如果不是退出菜单，就跳转到对应的链接
        this.activeTab = val;
        this.$router.push("/" + val);
        return;
      }
      // 如果是退出
      this.$axios.post(this.$config.url.userApi.userLogout).then((res) => {
        if (res.code !== 200) {
          // 接口返回失敗
          this.$message.error("退出登錄失敗!");
          return;
        }
        // 清空本地缓存，跳转到登录页
        window.sessionStorage.clear();
        this.$router.push("/login");
      }).catch(() => {
        this.$message.error("退出登錄失敗!");
      });
    }
  }
};
</script>

<style lang="less">
    @import "./assets/css/index.less";
</style>
